<template>
  <div class="iframe-container">
    <iframe
      :src="src"
      frameborder="0"
      allowfullscreen
      class="embedded-iframe"
    ></iframe>
  </div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  src: {
    type: String,
    required: true
  }
});

// 可选：在组件挂载和卸载时进行一些操作
onMounted(() => {
  console.log('Iframe mounted:', props.src);
  // 可以在这里添加一些加载状态或其他逻辑
});

onUnmounted(() => {
  console.log('Iframe unmounted');
  // 可以在这里进行清理工作
});
</script>

<style scoped>
.iframe-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.embedded-iframe {
  width: 100%;
  height: 100vh; /* 或者使用固定高度 */
  border: none;
}
</style>
